<template>
    <div class="main">
        <p v-for="item in littleData"
           :key="item.id"
           :class="{special:item.index === indexs}"
           @click="checkFun(item.index)"
        >{{item.des}}</p>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: `order-list-top`,
    props: {},
    created() {
    },
    data() {
      return {
        littleData: [
          {des: '全部', index: 1},
          {des: '本月', index: 2},
          {des: '今日', index: 3}
        ],
        indexs: 1,
        special: 'special'
      }
        ;
    },
    methods: {
      checkFun(index) {
        // 调用父组件的方法来依据条件查询
        this.$emit('searchCon', index);
        this.indexs = index;
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .main {
        flex-x();
        height: vw(30px);
        justify-content: flex-start;
        padding: 0 3vw;
        box-sizing: border-box;
        bor-t(1px, #e2e2e2);
        bor-b(1px, #e2e2e2);
        background :#fff;
        margin: 2vw 0;
        & p {
            line-height: vw(30px);
            width: 20vw;
            text-align: center;
            font-size: vw(13px)
        }
    }

    .special {
        color: main-color
    }
</style>
